<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>

  <body>
    <div id="app"></div>
  </body>
  <script>
    let { reactive, createApp, h } = VueRuntimeDOM;
    let app = createApp({
      setup(props, context) {
        let state = reactive({ user: "hl", flag: true });
        setTimeout(() => {
          state.flag = false;
        }, 3000);
        return (ctx) =>
          state.flag
            ? h("div", [
                h("li", { key: "A" }, "A"),
                h("li", { key: "B" }, "B"),
                h("li", { key: "E" }, "E"),
                h("li", { key: "C" }, "C"),
                h("li", { key: "D" }, "D"),
              ])
            : h("div", [
                h("li", { key: "A" }, "A"),
                h("li", { key: "B" }, "B"),
                h("li", { key: "G" }, "G"),
                h("li", { key: "E" }, "E"),
                h("li", { key: "H" }, "H"),
                h("li", { key: "D" }, "D"),
              ]);
      },
    });
    app.mount("#app");
  </script>
</html>
